<template>
    <div class="b-wrapper">
        <!-- top 按钮组 -->
        <div class="top-buttonList">
            <el-button type="primary">保存</el-button>
            <!-- <el-button type="primary" @click="VideoPlay">播放</el-button> -->
            <el-button @click="proportionSumbit(1)">1:1</el-button>
            <el-button @click="proportionSumbit(2)">2:2</el-button>
            <el-button @click="proportionSumbit(3)">3:3</el-button>
            <el-button @click="proportionSumbit(4)">4:4</el-button>
        </div>
    
        <!-- middle 视屏区域 -->
        <div class="middle-video">
            <!-- 职场名称筛选树 -->
            <div class="head-container">
                <el-input style="margin-bottom: 5px;"
                    placeholder="请输入职场名称"
                    v-model="filterText">
                </el-input>
                <el-tree
                    :data="data"
                    :props="defaultProps"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    :render-content="renderContent"
                    ref="tree">
                </el-tree>
            </div>
            <!-- 播放宫格 -->
            <div class="grid-container">
                <!-- 视频组 -->
                <div class="VideoGirus" :style="`grid-template-columns:${autoNumber} `">
                    <div v-for="(item, index) in Proportion" :key="index">
                        <div class="colvideo">
                            <cviewplayer
                                class="cviewplayer"
                                :key="freshDom"
                                :videoUrl="item.videoUrl"
                                :index="item.index"
                                :isPlay="isPlay"
                                @PlayClose="PlayClose"
                            ></cviewplayer>
                            <div
                                class="titlevideo"
                                :style="`color:${com.config.textColor};font-weight: ${
                                com.config.textWeight == true ? '100`' : 'normal'
                                };font-size: ${com.config.textSize};`"
                                v-show="com.config.isShow"
                            >{{ item.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页配置 -->
        <el-pagination
            :current-page="currentPage"
            :page-sizes="[1, 4, 9, 16]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChangeHandle"
            @current-change="pageCurrentChangeHandle">
        </el-pagination>
    </div>
</template>
    
<script>
//这个是引用子组件
import mixinViewModule from '@/mixins/view-module';
import cviewplayer from './Cviewplayer';

export default {
    name: 'zc-monitor',
    components: { cviewplayer },
    mixins: [mixinViewModule],
    data() {
        //左侧展开树数据
        const data = [
            {
                id: 1,
                label: '有效',
                children: [{
                    id: 3,
                    label: '乌鲁木齐',
                    children: [{
                        id: 5,
                        label: '天山区',
                        children: [{
                            id: 9,
                            label: '海云职场'
                        } ,{
                            id: 10,
                            label: '王伯忠职场'
                        }]
                    }, {
                        id: 6,
                        label: '新市区',
                        children: [{
                            id: 11,
                            label: '老六职场'
                        } ,{
                            id: 12,
                            label: '老七职场'
                        }]
                    }]
                }]
            },
            {
                id: 2,
                label: '故障',
                children: [{
                    id: 4,
                    label: '乌鲁木齐',
                    children: [{
                        id: 7,
                        label: '天山区',
                        children: [{
                            id: 13,
                            label: '海云职场'
                        } ,{
                            id: 14,
                            label: '王伯忠职场'
                        }]
                    }, {
                        id: 8,
                        label: '新市区',
                        children: [{
                            id: 15,
                            label: '老六职场'
                        } ,{
                            id: 16,
                            label: '老七职场'
                        }]
                    }]
                }]
            },
        ];
        return {
            mixinViewModuleOptions: {
                getDataListURL: '/monitor/device/page',
                getDataListIsPage: true,
                // deleteURL: '/sys/user',
                // deleteIsBatch: true,
                // exportURL: '/sys/user/export'
            },
            //是否开启自动分页机制
            startAutoPaging: true,
            //当前页
            currentPage: 1,
            //页条数（布局参数）
            pageSize: 16,
            //解析展开树
            data: JSON.parse(JSON.stringify(data)),
            //刷选节点
            filterText: '',
            //默认属性
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            //职场树选项
            zcOptions: undefined,
            //职场名称
            zcName: undefined,
            //赋值时间戳达到刷新的效果
            freshDom: '',
            //数据的数组
            Proportion: [],
            //判断比例
            autoNumber: 'auto auto auto auto',
            //是否播放
            isPlay: false,
            //存储数据的变量
            com:{
                //配置
                config:{
                    //标题颜色
                    textColor:'',
                    //字体大小
                    textSize:'3px',
                    //默认展示比例: 1(1:1)  2(2:2)  3(3:3)  4(4:4)
                    defaultProportion: 4,
                    //是否显示标题栏
                    isShow:true,
                    //字体大小
                    textSize: 'small', //medium / small / mini
                    //字体加粗
                    textWeight: false,
                    //用于播放首个视频用
                    showVideo: {},
                    //是否数据新增，修改，删除
                    isDataUpdate: false
                },
                //数据
                apiData:{
                    data:[
                            {
                                //视频唯一id
                                id:'1',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'2',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'3',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'4',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'5',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'6',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'7',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'8',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'9',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'10',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'11',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'12',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'13',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'14',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'15',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            },{
                                //视频唯一id
                                id:'16',
                                //视频状态 根据业务自定义是否需要此字段
                                status:0,
                                //视频标题名称
                                title:'视频地址标题名称',
                                //视频地址
                                videoUrl:'http://220.161.87.62:8800/hls/1/index.m3u8'
                            }
                            
                    ]
                }
            },
        }
    },
    created() {
        this.fun_into();
    },
    watch: {
        // 树节点过滤
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        //监听是否更改了视频数据源
        'com.config.isDataUpdate': {
            handler: function () {
                if (this.com.config.isDataUpdate) {
                    this.proportionSumbit(this.com.config.defaultProportion)
                    this.com.config.isDataUpdate = false
                }
            },
        },
    },
    methods: {
        //树筛选节点定义
        filterNode(value, data, node) {
            if (!value) return true;
            let parentNode = node.parent;
            let labels = [node.label];
            let level = 1;
            while (level < node.level) {
                labels = [...labels, parentNode.label];
                parentNode = parentNode.parent;
                level++;
            }
            return labels.some((label) => label.indexOf(value) !== -1);
        },
        //树选中
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                <span>{node.label}</span>
                </span>
            );
        },
        //接收子级传来的是否播放状态
        PlayClose() {
            this.isPlay = false
        },
        //初始化
        fun_into() {
            this.proportionSumbit(this.com.config.defaultProportion)
        },
        //播放事件
        VideoPlay() {
            this.isPlay = true
        },
        //视频比例
        proportionSumbit(val) {
            //grid赋值比例的
            this.proportion(val)
            this.Proportion = []
            this.freshDom = +new Date()
            for (var i = 0; i < val * val; i++) {
                this.Proportion.push({
                    id: this.com.apiData.data[i]?.id,
                    status: this.com.apiData.data[i]?.status,
                    title: this.com.apiData.data[i]?.title,
                    videoUrl: this.com.apiData.data[i]?.videoUrl,
                    index: i,
                })
            }
            //传递布局参数作为分页条数
            this.pageSize = val*val;
            console.log("传递布局参数作为分页条数,值为："+val*val);
        },
        //grid赋值比例的
        proportion(val) {
            switch (val) {
                case 1:
                this.autoNumber = 'auto'
                break
                case 2:
                this.autoNumber = 'auto auto'
                break
                case 3:
                this.autoNumber = 'auto auto auto'
                break
                case 4:
                this.autoNumber = 'auto auto auto auto'
                break
                default:
                this.autoNumber = 'auto auto auto auto'
                break
            }
        },
        // 检查是否允许移动
        checkMove(event) {
            // 根据需求判断，这里简单地允许所有移动
            return true;
        },
        // 拖拽结束后的处理
        onEnd(event) {
            // 更新视频播放状态等逻辑
            const movedItem = this.treeData.find(item => item.id === event.oldIndex);
            const targetIndex = event.newIndex;

            // 更新视频流的播放状态等（如果需要的话）
            // ...

            // 更新右侧宫格视频数据顺序
            this.Proportion = this.treeData.map(item => ({
                ...item,
                isPlay: this.isPlayMap[item.id] || false
            }));
        },
    },
}
</script>
<style scoped>
.vcp-controls-panel {
    font-size: 12px;
}
.b-wrapper {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /** 头部 */
    .top-buttonList {
        width: 100%;
        margin-top: 0vw;
        margin-left: 20px;
        padding-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        button:first-child {
            margin: 0;
            width: 80px;
            height: 35px;
        }
        button {
            margin-left: 10px;
            width: 80px;
            height: 35px;
        }
    }
    /** 中间-视频区域 */
    .middle-video{
        display: flex;
        /* 职场筛选树 */
        .head-container{
            width: 16vw;
            margin-left: 1vw;
            margin-right: 1vw;
            margin-top: 0.5vw;
        }
        /* 宫格视频区 */
        .grid-container {
            width: 90%;
            height: 60%;
            display: flex; /* 使用Flexbox布局 */
            justify-content: flex-end; /* 子项靠右对齐 */
            margin-right: 1vw;
            .VideoGirus {
                flex: 1;
                display: grid;
                grid-column-gap: 5px;
                .colvideo{
                    .titlevideo{
                        text-align: center;
                        /* font-size: medium !important; */
                        margin: 3px !important;
                    }
                }
            }
        }
    }
}
</style>